<template>
  <div>

	<myheader></myheader>
	

	<section class="featured-block text-center">
		<div class="container">
			
			<div>
				
				<Breadcrumb :datas="datas"></Breadcrumb>


			</div>


			<div>
				
				<table>
					
					<tr>
						
						<td>

							用户名:
							
						</td>

						<td>

							<input type="text" v-model="username" placeholder="请输入用户名" />
							
						</td>


					</tr>

					<tr>
						
						<td>

							密 码:
							
						</td>

						<td>

							<input type="password" v-model="password" />
							
						</td>


					</tr>

					<tr>
						
						<td>

							验证码:
							
						</td>

						<td>

							<input type="text" v-model="code" />
							
						</td>


					</tr>

					<tr>
						
						<td>

							
							
						</td>

						<td>

							<img @click="changeimg" :src="src" />
							
						</td>


					</tr>

					<tr>

						<td></td>
						
						<td> <Button @click="submit" color="blue">提 交</Button> </td>

					</tr>




				</table>


			</div>



		</div>
	</section>
	
    <myfooter></myfooter>
	
	
    
  </div>
  
</template>

<script>

//导入组件
import myheader from './myheader.vue'
import myfooter from './myfooter.vue'

export default {
  data () {
		return {
		//面包屑导航变量
		datas:[{title:'首页',route:{name:'index'}},{title:'注册页面'}],
		//表单数据
		username:'',
		password:'',
		code:'',
		src:'http://localhost:8000/code/'
		
		}
  },
  //注册组件标签
  components:{

      'myheader':myheader,
      'myfooter':myfooter

  },
  mounted:function(){

   
  
},
  methods:{
	  //点击切换验证码
	changeimg:function(){

		//定义随机数
		var num = Math.ceil(Math.random()*10);
		//将图片刷新
		this.src = this.src + "?code=" + num;

	},

  	//定义提交事件
  	submit:function(){


  		//判断 非空验证
		if(this.username == ''){

			
			this.$Message('用户名不能为空');
			return false;
		}

		if(this.password == ''){

            this.$Message('密码不能为空');
            return false;
		}

		if(this.code == ''){

            this.$Message('验证码不能为空');
            return false;
		}

  		//请求后台接口
  		this.axios.get('http://localhost:8000/register/',{params:{username:this.username,password:this.password}}).then((result) =>{


  			console.log(result);

			this.$Message(result.data.message);
			


		if(this.$Message(result.data.message) == '注册成功'){
			//跳转页面
			this.$router.push('/login');

		}
			


  		});


  	}

     
  }
}


</script>
 
<style>

td {
	padding:10px;
}

</style>